import React, { Component } from 'react';
import { TabBar } from 'antd-mobile';
import { history } from 'umi';
import BaseIcon from '../BaseIcon';

const menu = [
  {
    title: '首页',
    path: '/',
    icon: 'home',
  },
  {
    title: '商品列表',
    path: '/olist',
    icon: 'list',
  },
  {
    title: '购物车',
    path: '/cart',
    icon: 'cart',
  },
  {
    title: '我的',
    path: '/user',
    icon: 'my',
  },
];

interface ButtonNavPorps {
  pathName: string;
}

interface MenuItem {
  title: string;
  path: string;
  icon: string;
}

export default class ButtonNav extends Component<ButtonNavPorps> {
  render() {
    const { pathName, children } = this.props;

    return (
      <TabBar tintColor="red">
        {menu.map(({ title, path, icon }: MenuItem) => (
          <TabBar.Item
            title={title}
            key={icon}
            icon={<BaseIcon iconName={icon}></BaseIcon>}
            selectedIcon={<BaseIcon iconName={icon}></BaseIcon>}
            selected={pathName === path}
            onPress={() => {
              history.push(path);
            }}
          >
            {children}
          </TabBar.Item>
        ))}
      </TabBar>
    );
  }
}
